var api_token = sessionStorage.getItem('api_token');
// var head_title = sessionStorage.getItem('tr_name');
var tr_id = sessionStorage.getItem('tr_id');
var start_date = sessionStorage.getItem('start_date'); //开始时间
var end_date = sessionStorage.getItem('end_date'); //结束时间
// var http = 'http://c.yueshengkj.com/api/auth/mac?tr_id=' + tr_id;
var http;
if(start_date && end_date){
    http = 'http://c.yueshengkj.com/api/auth/mac?tr_id=' + tr_id + '&start_date=' + start_date + '&end_date=' + end_date; //请求网址
    $('.num_title_3').text('累计采样人数');
    $('.num_title_4').text('');
} else {
    http = 'http://c.yueshengkj.com/api/auth/mac?tr_id=' + tr_id + '&start_date=' + '20190522' + '&end_date=' + '20190523'
}
function mytime() {
    var t = null;
    t = setTimeout(time, 1000);
    function time() {
        clearTimeout(t);
        var dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();
        var m = dt.getMinutes();
        var s = dt.getSeconds();
        document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
        t = setTimeout(time, 1000);
    }
}
if(start_date && end_date){
} else {
  setInterval("getAllData(['crowdCount'],0)", 10000);
  setInterval("getAllData(['crowdFlow'],0)", 900000);
  setInterval("getAllData(['tourismResortStayTop'],0)", 900000);
  setInterval("getAllData(['tourismAttractionTop'],0)", 800000);
  setInterval("getAllData(['tourismAttractionsStayTop'],0)", 600000);
}
function getAllData(arg,show) {
    var ajaxbg = $("#background,#progressBar");
    show = show!==0;
    $.ajax({
        type: "GET",
        headers: {
            "Authorization":'Bearer ' + api_token
        },
        async: true,
        cache: false,
        crossDomain: true == !(document.all),
        url: http,
        data: {
            "@action": arg.join(',')
        },
        dataType: "json",
        beforeSend:function()
        {
            if(show)
            ajaxbg.show();
        },
        success: function (res) {
            ajaxbg.hide();
            for (var i=0; i<arg.length; i++) {
                if (arg[i] == 'crowdCount') {
                    crowdCount(res.data.crowdCount);
                } else if (arg[i] == 'tourismResortStayTop') {
                    tourismResortStayTop(res.data.tourismResortStayTop)
                } else if (arg[i] == 'tourismAttractionTop') {
                    tourismAttractionTop(res.data.tourismAttractionTop)
                } else if (arg[i] == 'crowdFlow') {
                    if(start_date && end_date){
                        crowdFlow(res.data.crowdFlowDate)
                    } else {
                        crowdFlow(res.data.crowdFlow)
                    }
                } else if (arg[i] == 'tourismAttractionsStayTop') {
                    tourismAttractionsStayTop (res.data.tourismAttractionsStayTop)
                }
            }
        },
        error:function(){
            ajaxbg.hide();
            alert("数据加载失败!");
        }
    });
}
function crowdCount(data) {
    var Today = data.crowdCount;
    var Yesterday = data.crowdCountYesterday;
    var dayStr = Number(Today) - Number(Yesterday);
    var dayContrast = Math.abs(Today - Yesterday);
    if (dayStr >= 0) {
        $('#increase').text('增加');
    } else {
        $("#increase").text('减少')
    }
    $(".tourists_lose_today").text(Today);
    $("#yesterday").text(dayContrast);
    var Year = data.crowdCountYear;
    var YearContrast = data.crowdCountLastYear;
    var YearStr = Number(Year) - Number(YearContrast);
    var yearContrast = Math.abs(Year - YearContrast);
    if (YearStr >= 0) {
        $('#year_increase').text('增加');
    } else {
        $("#year_increase").text('减少')
    }
    $(".visitors_year").text(Year);
    $("#visitors_year_num").text(yearContrast);
}
function crowdFlow(data) {
    var xAxisData=[],seriesData=[];
    for (var i=0;i<data.length;i++) {
        xAxisData.push(data[i].time);
        seriesData.push(data[i].crowdCount);
    }
    var myChart = echarts.init(document.getElementById('passenger'));
    var option = {
        title: {
            text: '',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 12,
                color: '#F1F1F3'
            },
            left: '6%'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        grid: {
            left: '4%',
            right: '2%',
            bottom: '0%',
            top: '10%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
                show:true,
                lineStyle: {
                    color: '#00DAEE'
                }
            },
            // data:['2点10分','3点10分','4点10分','5点10分','6点10分','7点10分','8点10分'] ,
            data:xAxisData,
            axisLabel: {
                interval: 0,
                rotate: 50,
                textStyle: {
                    color: '#D0EBFF',
                    fontSize: 10
                }
            },
        }],
        yAxis: [{
            type: 'value',
            splitNumber:2,
            // interval: 5,
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#00DAEE'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#D0EBFF',
                    fontSize: 10
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(216,216,216,1)',
                    opacity:0.1381,
                }
            },
        }],
        series: [{
            name: '',
            type: 'line',
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(82, 191, 255, 0.3)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(82, 191, 255, 0)'
                    }], false),
                    shadowColor: 'rgba(228, 139, 76, 0.1)',
                    shadowBlur: 10
                }
            },
            symbolSize: 4,
            itemStyle: {
                normal: {
                    color: '#71FFD5',
                    borderColor: '#e48b4c'
                }
            },
            data: seriesData
        }]
    };
    myChart.setOption(option);
}
function tourismResortStayTop(data) {
    var legendData=[],seriesData=[],selected={};
    for (var i=0;i<data.length;i++) {
        selected[data[i].label] = data[i].value!==0;
        legendData.push({
            value: data[i].value,
            name: data[i].label,
            icon:'circle',
            textStyle: {
                color: '#D0EBFF'
            },
            itemStyle: {
                normal: {
                    color: {
                        colorStops: [{
                            offset: 0,
                            color: getColorByTourismResortStayTop(i)[0] // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: getColorByTourismResortStayTop(i)[1] // 100% 处的颜色
                        }]
                    }
                }
            }
        });
        seriesData.push(data[i].value);
    }
    var myChart = echarts.init(document.getElementById('year_consume'));
    var option = {
        textStyle: {
            color: '#D0EBFF'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b} : {d}%"
        },
        legend: {
            orient: 'vertical',
            y:'8%',
            x: 'left',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: '#D0EBFF',
                fondSize:12,
            },
            // data:['<1小时','1-3小时','3-5小时','>5小时']
            data:legendData,
            selected:selected,
        },
        calculable : true,
        series : [
            {
                name:'',
                type:'pie',
                radius : ['30%', '70%'],
                center : ['50%', '55%'],
                roseType : 'radius',
                // animationType: 'scale',
                // animationEasing: 'elasticOut',
                // animationDelay: function (idx) {
                //     return Math.random() * 200;
                // },
                labelLine:{
                    normal:{
                        show: true,
                        length:25,
                        length2:60,
                        lineStyle:{
                            color:'#00DAEE',
                            opacity: 0.6,
                        },
                    },
                },
                label: {
                    normal: {
                        formatter: function(a){return a.name+' '+a.percent.toFixed(0)+'%';},
                        padding: [0, -70,30,-70],
                        rich: {
                            d: {
                                color: '#D0EBFF',
                                align: 'center'
                            }
                        },
                        textStyle: {
                            color: '#D0EBFF'
                        }
                    }
                },
                data:legendData
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
function getColorByTourismResortStayTop(index,key)
{
    switch (index)
    {
        case 0:
            return ['#009FFF','#3A00FF'];
            break;
        case 1:
            return ['#FFD500','#FF5B00'];
            break;
        case 2:
            return ['#FF7671','#A14AFF'];
            break;
        case 3:
            return ['#F312D8','#F50339'];
            break;
        default:
            return ['',''];
    }
}
function tourismAttractionTop(data) {
    var color = [
        ['rgba(0,208,207,0)', 'rgba(0,208,207,1)'],
        ['rgba(255,144,78,0)', 'rgba(255,144,78,1)'],
        ['rgba(47,125,255,0)', 'rgba(47,125,255,1)'],
        ['rgba(139,59,255,0)', 'rgba(139,59,255,1)'],
        ['rgba(237,9,9,0)', 'rgba(237,9,9,1)'],
        ['rgba(237,23,9,0)', 'rgba(237,23,9,1)'],
        ['rgba(223,9,237,0)', 'rgba(223,9,237,1)'],
        ['rgba(107,237,9,0)', 'rgba(107,237,9,1)'],
        ['rgba(241,81,101,0)', 'rgba(241,81,101,1)']
    ];
    var yAxisData = [], seriesData = [];
    var data2 = data;
    for (var i = 0; i < data2.length; i++) {
        yAxisData.push(data2[i].ta_name);
        seriesData.push(data2[i].crowdCount);
    }
    yAxisData = yAxisData.reverse().slice(0,5);
    seriesData = seriesData.reverse().slice(0,5);
    var myChart = echarts.init(document.getElementById('scenic_spot_flow'));
    var option = {
        tooltip: {
            show: true,
            formatter: "{b} <br> {c}人"

        },
        grid: {
            top: '5%',
            bottom: '10%',
            left: '10%'
        },
        xAxis: [{
            type: 'value',
            axisTick: {
                show: false
                // color:'#fff',
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#00DAEE'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#D0E3FF',
                    fontSize: 12
                }
            },
            splitLine: {
                show: false,
                color: '#D0E3FF'
            }
        }],
        yAxis: [{
            type: 'category',
            data: yAxisData,
            // minInterval: 1,
            axisTick: {
                // color:'#fff',
                show: false
            },
            axisLine: {
                //  color:'#fff',
                show: true,
                lineStyle: {
                    color: '#00DAEE'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#D0E3FF',
                    fontSize: 12,
                    align:'left',
                    padding :[0,0,0, -50],
                }
            }
        }],
        series: [{
            name: '景点排行',
            type: 'bar',
            barWidth: 14,
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{c}人',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    }
                }
            },
            data: []
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    for (var j = 0; j < seriesData.length; j++) {
        option.series[0].data.push({
            value: seriesData[j],
            name: yAxisData[j],
            itemStyle: {
                normal: {
                    barBorderRadius: [0, 10, 10, 0],
                    color: {
                        type: 'bar',
                        colorStops: [{
                            offset: 0,
                            color: color[j][0] // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: color[j][1] // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                }
            }
        });
    }
    myChart.setOption(option);
}
function tourismAttractionsStayTop(data) {
    var color = [
        ['rgba(0,208,207,0)', 'rgba(0,208,207,1)'],
        ['rgba(255,144,78,0)', 'rgba(255,144,78,1)'],
        ['rgba(47,125,255,0)', 'rgba(47,125,255,1)'],
        ['rgba(139,59,255,0)', 'rgba(139,59,255,1)'],
        ['rgba(237,9,9,0)', 'rgba(237,9,9,1)'],
        ['rgba(237,23,9,0)', 'rgba(237,23,9,1)'],
        ['rgba(223,9,237,0)', 'rgba(223,9,237,1)'],
        ['rgba(107,237,9,0)', 'rgba(107,237,9,1)'],
        ['rgba(241,81,101,0)', 'rgba(241,81,101,1)']
    ];
    var yAxisData = [], seriesData = [];
    var totalCount;
    var data1 = data;
    for (var i = 0; i < data1.length; i++) {
        yAxisData.push(data1[i].ta_name);
        seriesData.push(data1[i].countPercentage.replace('%',''));
    }
    yAxisData = yAxisData.reverse().slice(0,5);
    seriesData = seriesData.reverse().slice(0,5);
    var myChart = echarts.init(document.getElementById('scenic_spot_date'));
    var option = {
        tooltip: {
            show: true,
            formatter: "{b} <br> {c}%"
        },
        grid: {
            top: '5%',
            bottom: '10%',
            left: '10%'
        },
        xAxis: [{
            type: 'value',
            axisTick: {
                show: false
                // color:'#fff',
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#00DAEE'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#D0E3FF',
                    fontSize: 12,
                }
            },
            splitLine: {
                show: false,
                color: '#D0E3FF'
            }
        }],
        yAxis: [{
            type: 'category',
            data: yAxisData,
            // minInterval: 1,
            axisTick: {
                // color:'#fff',
                show: false
            },
            axisLine: {
                //  color:'#fff',
                show: true,
                lineStyle: {
                    color: '#00DAEE'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#D0E3FF',
                    fontSize: 12,
                    align:'left',
                    padding :[0,0,0, -50],
                },
                formatter:function(a){
                    return a.length>4?a.substring(0,3)+'...':a;
                }
            }

        }],
        series: [{
            name: '景点排行',
            type: 'bar',
            barWidth: 14,
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{c}%',
                    textStyle: {
                        color: '#fff',
                        fontSize: '12'
                    }
                }
            },
            data: []
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    for (var j = 0; j < seriesData.length; j++) {
        option.series[0].data.push({
            value: seriesData[j],
            name: yAxisData[j],
            itemStyle: {
                normal: {
                    barBorderRadius: [0, 10, 10, 0],
                    color: {
                        type: 'bar',
                        colorStops: [{
                            offset: 0,
                            color: color[j][0] // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: color[j][1] // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                }
            }
        });
    }
    myChart.setOption(option);

}
$(function () {
    mytime();
    getAllData(['crowdCount','tourismResortStayTop','crowdFlow','tourismAttractionTop','tourismAttractionsStayTop']);
});